Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / settings / sections / StickersSettingsSection.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD -->

Tff7b72<templateTff7b72>

Tff7b72<SettingsSectionBlock

Te6edf3v-show=Ta5d6ff"visible"

Te6edf3eyebrow=Ta5d6ff"Messages"

Te6edf3:title=Ta5d6ff"$t('stickers.settings_title')"

Te6edf3:description=Ta5d6ff"$t('stickers.settings_description')"

Te6edf3body-class=Ta5d6ff"space-y-4"

Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"text-sm text-gray-600 dark:text-gray-400"Tff7b72>

Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"stickers.count"Tff7b72, Tff7b72{ Te6edf3countTff7b72: Te6edf3stickerCount Tff7b72}Tff7b72) Tff7b72}}

Tff7b72</div>

Tff7b72<label Te6edf3class=Ta5d6ff"flex items-center gap-2 text-sm text-gray-800 dark:text-gray-200 cursor-pointer"Tff7b72>

Tff7b72<input

Te6edf3:checked=Ta5d6ff"replaceDuplicates"

Te6edf3type=Ta5d6ff"checkbox"

Te6edf3class=Ta5d6ff"rounded-sm"

@Te6edf3change=Ta5d6ff"$emit('update:replaceDuplicates', $event.target.checked)"

Tff7b72/>

Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"stickers.replace_duplicates"Tff7b72) Tff7b72}}

Tff7b72</label>

Tff7b72<div Te6edf3class=Ta5d6ff"grid grid-cols-1 sm:grid-cols-2 gap-3"Tff7b72>

Tff7b72<button

Te6edf3type=Ta5d6ff"button"

Te6edf3class=Ta5d6ff"flex flex-col items-center justify-center gap-2 p-4 rounded-2xl border border-amber-200 dark:border-zinc-800 bg-white/50 dark:bg-zinc-800/50 hover:border-amber-500 transition group"

@Te6edf3click=Ta5d6ff"$emit('export')"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"export" Te6edf3class=Ta5d6ff"size-6 text-amber-500 group-hover:scale-110 transition" Tff7b72/>

Tff7b72<div Te6edf3class=Ta5d6ff"text-sm font-bold"Tff7b72>Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"stickers.export"Tff7b72) Tff7b72}}Tff7b72</div>

Tff7b72</button>

Tff7b72<button

Te6edf3type=Ta5d6ff"button"

Te6edf3class=Ta5d6ff"flex flex-col items-center justify-center gap-2 p-4 rounded-2xl border border-teal-200 dark:border-zinc-800 bg-white/50 dark:bg-zinc-800/50 hover:border-teal-500 transition group"

@Te6edf3click=Ta5d6ff"triggerImport"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"import" Te6edf3class=Ta5d6ff"size-6 text-teal-500 group-hover:scale-110 transition" Tff7b72/>

Tff7b72<div Te6edf3class=Ta5d6ff"text-sm font-bold"Tff7b72>Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"stickers.import"Tff7b72) Tff7b72}}Tff7b72</div>

Tff7b72</button>

Tff7b72<input

Te6edf3ref=Ta5d6ff"importFile"

Te6edf3type=Ta5d6ff"file"

Te6edf3accept=Ta5d6ff".json,application/json"

Te6edf3class=Ta5d6ff"hidden"

@Te6edf3change=Ta5d6ff"onImportChange"

Tff7b72/>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"border-t border-gray-200 dark:border-zinc-700 pt-4"Tff7b72>

Tff7b72<h3 Te6edf3class=Ta5d6ff"text-sm font-semibold mb-2 text-gray-800 dark:text-zinc-100"Tff7b72>

Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"sticker_packs.section_title"Tff7b72) Tff7b72}}

Tff7b72</h3>

Tff7b72<p Te6edf3class=Ta5d6ff"text-xs text-gray-500 dark:text-zinc-400 mb-3"Tff7b72>

Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"sticker_packs.section_description"Tff7b72) Tff7b72}}

Tff7b72</p>

Tff7b72<StickerPacksManager Tff7b72/>

Tff7b72</div>

Tff7b72</SettingsSectionBlock>

Tff7b72</template>

Tff7b72<scriptTff7b72>

import MaterialDesignIcon from "../../MaterialDesignIcon.vue";

import StickerPacksManager from "../../stickers/StickerPacksManager.vue";

import SettingsSectionBlock from "../SettingsSectionBlock.vue";

export default {

name: "StickersSettingsSection",

components: {

MaterialDesignIcon,

StickerPacksManager,

SettingsSectionBlock,

},

props: {

visible: {

type: Boolean,

default: true,

},

stickerCount: {

type: Number,

default: 0,

},

replaceDuplicates: {

type: Boolean,

default: false,

},

},

emits: ["export", "import", "update:replaceDuplicates"],

methods: {

triggerImport() {

this.$refs.importFile?.click();

},

onImportChange(event) {

this.$emit("import", event);

},

},

};

Tff7b72</script>